<template>
	<view class="template-moment tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view class="custom-nav__back">
					<view class="tn-icon-activity"></view>
				</view>
				<view class="" style="width: 62vw; overflow: hidden; margin-top: 36rpx;">
					<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" :bold="true"
						:fontSize="36"></tn-tabs>
				</view>
			</view>
		</tn-nav-bar>

		<view :style="{ paddingTop: vuex_custom_bar_height + 20 + 'px' }">
			<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom" v-if="current === 0 || current === 3">
				<view class="tn-padding-bottom-xl">
					<view class="">
						<view class="content-bg tn-margin tn-padding" style="position: relative;"
							v-for="(item, index) in noticeList" :key="index" @click="navigateToEdit(item)">
							<view :class="['oa-' + item.color]"
								style="width: 15rpx; height: 100%; position: absolute; top: 0; left: 0; border-radius: 15rpx 0 0 15rpx; font-size: 32rpx;">
							</view>
							<view class="tn-margin-left-xs">
								<view class="tn-flex tn-flex-col-center tn-flex-row-between" style="margin-top: -6rpx;">
									<view
										class="justify-content-item tn-flex tn-flex-col-center tn-text-lg tn-text-bold">
										<view class="justify-content-item">{{ item.roomNumber }}</view>
										<view class="justify-content-item">
											<view class="tag-state"
												:class="['tn-bg-' + item.color + '--light', 'oa-' + item.color]"
												style="font-size: 16rpx;">
												<text>{{ getStatusText(item.status) }}</text>
											</view>
										</view>
									</view>
									<view class="justify-content-item tn-color-gray">{{ item.pendingTime }}</view>
								</view>
								<view class="tn-text-justify clamp-text-1 tn-padding-top-xs tn-color-gray--dark">
									{{ item.remark }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom" v-if="current === 1">
				<view class="tn-padding-bottom-xl">
					<view class="">
						<view class="content-bg tn-margin tn-padding" style="position: relative;"
							v-for="(item, index) in completedList" :key="index"
							@click="navigateToEdit(item)">
							<view :class="['oa-' + item.color]"
								style="width: 15rpx; height: 100%; position: absolute; top: 0; left: 0; border-radius: 15rpx 0 0 15rpx; font-size: 32rpx;">
							</view>
							<view class="tn-margin-left-xs">
								<view class="tn-flex tn-flex-col-center tn-flex-row-between" style="margin-top: -6rpx;">
									<view
										class="justify-content-item tn-flex tn-flex-col-center tn-text-lg tn-text-bold">
										<view class="justify-content-item">{{ item.roomNumber }}</view>
										<view class="justify-content-item">
											<view class="tag-state"
												:class="['tn-bg-' + item.color + '--light', 'oa-' + item.color]"
												style="font-size: 16rpx;">
												<text>{{ getStatusText(item.status) }}</text>
											</view>
										</view>
									</view>
									<view class="justify-content-item tn-color-gray">{{ item.pendingTime }}</view>
								</view>
								<view class="tn-text-justify clamp-text-1 tn-padding-top-xs tn-color-gray--dark">
									{{ item.remark }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom" v-if="current === 2">
				<view class="tn-padding-bottom-xl">
					<view class="">
						<view class="content-bg tn-margin tn-padding" style="position: relative;"
							v-for="(item, index) in expiredList" :key="index"
							@click="navigateToEdit(item)">
							<view :class="['oa-' + item.color]"
								style="width: 15rpx; height: 100%; position: absolute; top: 0; left: 0; border-radius: 15rpx 0 0 15rpx; font-size: 32rpx;">
							</view>
							<view class="tn-margin-left-xs">
								<view class="tn-flex tn-flex-col-center tn-flex-row-between" style="margin-top: -6rpx;">
									<view
										class="justify-content-item tn-flex tn-flex-col-center tn-text-lg tn-text-bold">
										<view class="justify-content-item">{{ item.roomNumber }}</view>
										<view class="justify-content-item">
											<view class="tag-state"
												:class="['tn-bg-' + item.color + '--light', 'oa-' + item.color]"
												style="font-size: 16rpx;">
												<text>{{ getStatusText(item.status) }}</text>
											</view>
										</view>
									</view>
									<view class="justify-content-item tn-color-gray">{{ item.pendingTime }}</view>
								</view>
								<view class="tn-text-justify clamp-text-1 tn-padding-top-xs tn-color-gray--dark">
									{{ item.remark }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="">
			<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-1"
				@click="tn('work/add')">
				<view class="tn-icon-add-lack tn-color-white"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listPendingTask,
		getPendingTask,
		delPendingTask,
		addPendingTask,
		updatePendingTask
	} from "@/api/house/PendingTask/index";
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	// import { error } from "console";
	export default {
		name: 'Moment',
		data() {
			return {
				noticeList: [],
				completedList: [],
				expiredList: [],
				current: 0,
				scrollList: [{
						name: '待完成'
					},
					{
						name: '已完成'
					},
					{
						name: '已过期'
					}
					
				],

				// 内容默认隐藏显示的高度
				contentHideShowHeight: 0,
				isLoading: false, // 添加一个加载状态标志
			}
		},
		
		onPullDownRefresh() {
			// 设置加载状态为true
			this.isLoading = true;

			// 执行获取待办任务的函数
			this.getlistPendingTask();

			// 停止下拉刷新动画
			uni.stopPullDownRefresh();

			// 设置加载状态为false
			this.isLoading = false;

			// 可以在这里添加一个提示，告诉用户刷新完成
			uni.showToast({
				title: '刷新成功',
				icon: 'success',
				duration: 2000
			});
		},

		methods: {
			 handlePageShow() {
			      // 这里是页面每次显示时需要执行的逻辑
			      console.log('Page is shown2')
				  this.getlistPendingTask();
			    },
			navigateToEdit(res) {
				console.log(res)
				uni.navigateTo({
					url: 'work/edit?res=' + encodeURIComponent(JSON.stringify(res))
				});
			},
			
			getlistPendingTask() {
			    this.isLoading = true;
			    listPendingTask().then(res => {
			        console.log("res", res.rows);
			
			        // 将 status === 0 和 status === 3 的任务放在一起
			        this.noticeList = res.rows
			            .filter(item => item.status === 0 || item.status === 3)
			            .map(item => ({
			                ...item,
			                color: this.getColorByStatus(item.status)
			            }));
			
			        this.completedList = res.rows
			            .filter(item => item.status === 1)
			            .map(item => ({
			                ...item,
			                color: this.getColorByStatus(item.status)
			            }));
			
			        this.expiredList = res.rows
			            .filter(item => item.status === 2)
			            .map(item => ({
			                ...item,
			                color: this.getColorByStatus(item.status)
			            }));
			    }).catch(error => {
			        console.error("Error fetching data: ", error);
			    }).finally(() => {
			        this.isLoading = false;
			    })
			},



			getColorByStatus(status) {
				if (status === 0) {
					return 'blue';
				} else if (status === 1) {
					return 'green';
				} else if (status === 2) {
					return 'orangered';
				} else {
					return 'grey';
				}
			},
		getStatusText(status) {
		    if (status === 0) {
		        return '待完成';
		    } else if (status === 1) {
		        return '已完成';
		    } else if (status === 2) {
		        return '已过期';
		    } else if (status === 3) {
		        return '暂存'; // 为暂存任务添加状态文本
		    } else {
		        return '未知';
		    }
		},

			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			},

			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-moment {
		height: 100vh;
		max-width: 640px;
		margin: 0 auto;
		background-color: #f8f7f8;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;
		max-width: 640px;

		&__back {
			margin: auto 5rpx;
			font-size: 45rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}
	}

	/* 新增OA色系，自行调用，或者拿色值去用，多种方式*/
	.oa-black {
		color: #1D2541;
		background-color: #1D2541;
	}

	.oa-blue {
		color: #4B98FE;
		background-color: #4B98FE;
	}

	.oa-orangeyellow {
		color: #FFAC00;
		background-color: #FFAC00;
	}

	.oa-green {
		color: #00D05E;
		background-color: #00D05E;
	}

	.oa-orange {
		color: #FE871B;
		background-color: #FE871B;
	}

	.oa-cyan {
		color: #00C8B0;
		background-color: #00C8B0;
	}

	.oa-indigo {
		color: #00B9FE;
		background-color: #00B9FE;
	}

	.oa-orangered {
		color: #FB6A67;
		background-color: #FB6A67;
	}

	.oa-purple {
		color: #957BFE;
		background-color: #957BFE;
	}

	.oa-content {
		max-width: 640px;
		margin: 0 auto;
		background-color: #F8F7F8;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 背景阴影 start*/
	.content-bg {
		border-radius: 15rpx;
		background-color: #FFFFFF;
		// box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 按钮 */
	.button-1 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		bottom: 24%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	.button-2 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		bottom: 15%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;

			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 90rpx;
				height: 90rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
				}
			}
		}
	}

	/* 悬浮 */
	.tnxuanfu {
		animation: suspension 3s ease-in-out infinite;
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-0.8rem);
		}
	}

	/* 悬浮按钮 */
	.button-shop {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		left: 5rpx;
		top: 5rpx;
		z-index: 1001;
		border-radius: 100px;
		opacity: 0.9;
	}





	/* 用户头像 start */
	.logo-image {
		width: 70rpx;
		height: 70rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: center;
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 15rpx;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F7F8;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid #F8F7F8;
	}

	/* 间隔线 end*/


	/* 最新消息-头像 start */
	.message-image {
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.message-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: center;
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 100rpx;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 标签 start*/
	.tag-state {
		display: inline-block;
		padding: 8rpx 12rpx 6rpx;
		margin: 12rpx 15rpx 15rpx 10rpx;
		border-radius: 10rpx;
	}
</style>